<!-- 标题页管理 -->
<template>
  <div>
    <edu-dialog
      :visible.sync="dialogConfig.showDialog"
      @close="closeDialog(dialogConfig)"
      width="90%"
    >
      <div slot="title"></div>
      <el-container class="pageView">
        <el-aside width="450px">
          <Preview :data="dialogConfig.formData" ref="preview" />
        </el-aside>
        <el-main>
          <h1>{{ dialogConfig.title }}</h1>
          <el-row class="cardMiniBar">
            <el-col :span="24">
              <div class="fr">
                <el-button type="primary" @click="add" size="small"
                  >新增Tab页</el-button
                >
                <el-button type="primary" @click="save" size="small"
                  >保存</el-button
                >
                <el-button type="primary" @click="publish" size="small"
                  >发布</el-button
                >
              </div>
            </el-col>
          </el-row>

          <el-form
            ref="dialogForm"
            :model="dialogConfig.formData"
            :rules="dialogConfig.action === 'view' ? {} : dialogConfig.rules"
            label-width="100px"
            size="small"
            style="height: 550px; overflow: auto"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动名称" prop="title">
                  <el-input v-model="dialogConfig.formData.title" clearable />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="图片" prop="image">
                  <Upload
                    v-model="dialogConfig.formData.image"
                    ref="uploadComp"
                  >
                    <div class="el-upload__tip" slot="tip">
                      尺寸：750*280，大小不超过5M
                    </div>
                  </Upload>
                </el-form-item>
              </el-col>
            </el-row>

            <ul class="tabs">
              <li
                v-for="(item, index) in dialogConfig.formData.thematicFloorList"
              >
                <el-form-item :label="`楼层${index + 1}`">
                  <el-input v-model="item.title" class="input-with-select">
                    <el-button slot="append" @click="delTab(item)"
                      >删除</el-button
                    >
                  </el-input>
                </el-form-item>
                <el-form-item label="关联产品">
                  <el-row :gutter="20">
                    <el-col
                      :span="8"
                      v-for="(item2, index2) in item.thematicProduceList"
                      :key="item2.farmProduceId"
                      :padding="10"
                      style="margin-bottom: 20px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        class="cardBody"
                      >
                        <div class="imageBox">
                          <el-image
                            :src="`/nongmao/nb-as/1.0.1/FileService/previewFile?fileId=${item2.image}`"
                            class="image"
                          >
                          </el-image>
                        </div>
                        <div class="info">
                          <span class="title">{{ item2.title }}</span>
                          <div class="bottom clearfix">
                            <div>{{ item2.providerName }}</div>
                            <el-button
                              type="text"
                              class="fr"
                              @click="delProduct(index, item2)"
                              >删除</el-button
                            >
                            <time class="price">￥{{ item2.price }}</time>
                          </div>
                        </div>
                      </el-card>
                    </el-col>

                    <el-col :span="8">
                      <div class="plus" @click="addProduct(index)">
                        <span>
                          <i class="el-icon-plus"></i>
                          批量添加农产品
                        </span>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
              </li>
            </ul>
          </el-form>
        </el-main>
      </el-container>

      <span slot="buttons" v-if="dialogConfig.action !== 'view'">
        <template>
          <!-- <el-button @click="closeDialog(dialogConfig)"> 取消 </el-button> -->
          <!-- <el-button type="primary" @click="handlerSubmit"> 提交 </el-button> -->
        </template>
      </span>
    </edu-dialog>

    <SelectProducts ref="selectProducts" @done="getProducts" />
  </div>
</template>

<script>
import utils from "@/utils";
import mixins from "@/mixins";

import {
  formThematicGame,
  publishThematicGame,
  saveThematicGame,
} from "@/api/thematicManagement";

import SelectProducts from "./SelectProducts";
import Preview from "./Preview";

export default {
  mixins: [mixins],
  components: {
    SelectProducts,
    Preview,
  },
  data() {
    return {
      currentIndex: null,
      dialogConfig: {
        title: "专题页配置",
        showDialog: false,
        tabsValue: "",
        formData: {},
        rules: {
          title: [
            {
              required: true,
              message: "此项必填！",
              trigger: "blur",
            },
          ],
        },
      },
    };
  },
  created() {
    this.initOptions();
  },
  methods: {
    open(data) {
      this.dialogConfig.data = data;
      this.openDialog(this.dialogConfig);

      this.query();
    },
    async initOptions() {},
    // 查询
    async query() {
      let { returnObj } = await formThematicGame(this.dialogConfig.data.id);
      this.dialogConfig.formData = returnObj;

      this.$nextTick(() => {
        this.$refs.uploadComp.init();
      });
    },
    closeDialog(dialog) {
      dialog.showDialog = false;
      this.$refs["dialogForm"].resetFields();
    },
    openDialog(dialog) {
      dialog.showDialog = true;
    },
    // 新增 删除页签页
    delTab(row) {
      console.log(row);
      let tabs = this.dialogConfig.formData.thematicFloorList;
      let activeName = this.dialogConfig.tabsValue;
      if (activeName === row.title) {
        tabs.forEach((tab, index) => {
          if (tab.title === row.title) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.title;
            }
          }
        });
      }

      this.dialogConfig.tabsValue = activeName;
      this.dialogConfig.formData.thematicFloorList = tabs.filter(
        (tab) => tab.title !== row.title
      );
    },
    add() {
      let lengthLen = this.dialogConfig.formData.thematicFloorList.length + 1;
      this.dialogConfig.formData.thematicFloorList.push({
        title: "楼层" + lengthLen,
        sort: lengthLen,
        thematicProduceList: [],
      });

      // 滚动到最底部
      this.$nextTick(() => {
        this.$refs.dialogForm.$el.scrollTo({
          top: 1000000,
        });
      });
    },
    // 添加产品
    addProduct(index) {
      this.$refs.selectProducts.open();
    },
    // 获取产品
    getProducts(products) {
      // 定义提交标识id
      products.map((item) => {
        item.farmProduceId = item.id;
      });

      let current =
        this.dialogConfig.formData.thematicFloorList[this.currentIndex]
          .thematicProduceList;
      // let current = null;
      // this.dialogConfig.formData.thematicFloorList.map((item) => {
      //   // 当前tab页
      //   if (item.title == this.dialogConfig.tabsValue) {
      //     current = item.thematicProduceList;
      //   }
      // });

      // 去重
      products.map((item) => {
        let flag = current.some(
          (item2) => item.farmProduceId == item2.farmProduceId
        );

        if (!flag) {
          current.push(item);
        }
      });
    },
    // 删除产品
    delProduct(index, product) {
      let current = this.dialogConfig.formData.thematicFloorList[index];

      current.thematicProduceList.map((item2, index2) => {
        if (item2.farmProduceId == product.farmProduceId) {
          current.thematicProduceList.splice(index2, 1);
        }
      });
    },
    async save() {
      let params = {
        ...this.dialogConfig.formData,
      };
      saveThematicGame(params).then((res) => {
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.query();
      });
    },
    async publish() {
      let params = {
        ...this.dialogConfig.formData,
      };
      publishThematicGame(params).then((res) => {
        this.$message({
          type: "success",
          message: "发布成功",
        });
        this.closeDialog(this.dialogConfig);
        this.query();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// :deep.el-tabs--card > .el-tabs__header .el-tabs__item {
//   user-select: none;
// }

.pageView{
  h1{
    margin: 0;
    font-size: 16px;
  }
}

:deep.tabs .el-row {
  margin: 0 !important;
}
.tabs {
  .plus {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 1px;
    height: 319px;
    cursor: pointer;
  }
}
.cardBody {
  .title {
    height: 42px;
    line-height: 16px;
    display: block;
  }
  .imageBox {
    text-align: center;
    background-color: #f5f7fa;
    .image {
      height: 150px;
    }
  }

  .info {
    padding: 10px;
    .price {
      color: #ff0000;
      font-weight: bold;
    }
  }
}
</style>
